
import React, { Component } from "react";
import { Col, Row, Tooltip,Table, Button, Divider, Steps, Progress, Badge, Rate, Typography, Breadcrumb, Descriptions, Result, Input, Form,
  Select, Image, InputNumber  } from 'antd';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import { PaperClipOutlined } from '@ant-design/icons';
import styles from './infoDetail.module.css'
const { Step } = Steps;
const { TextArea } = Input;
// import { ProColumns } from '@ant-design/pro-table';
// import ProTable, { TableDropdown } from '@ant-design/pro-table';
const { Title } = Typography;
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};


const columns = [
  {
    title: '立项名称',
    dataIndex: 'name',
    width:266,
    ellipsis:true,
    render: (name) => (
      <Tooltip placement="topRight" title={name}>
        {name}
      </Tooltip>
    ),
  },
  {
    title: '金额',
    dataIndex: 'count',
    sorter: {
      compare: (a, b) => a.chinese - b.chinese,
      multiple: 3,
    },
    render:(_,record) => <span>{record.count}万元</span>
  },
  {
    title: '用途',
    dataIndex: 'description',
    width:222
  },
  {
    title: '管制单位',
    dataIndex: 'company',
  },
  {
    title: '发起人',
    dataIndex: 'sponsor', 
  },
  {
    title: '申请类型',
    dataIndex: 'type', 
  },
  {
    title: '审批状态',
    dataIndex: 'status', 
    render:() => <span><Badge status="success" /> 成功</span>
  },
  {
    title: '申请时间',
    dataIndex: 'creatTime', 
    width:220
  },  
  {
    title: '操作',
    dataIndex: 'business',
    width:211,
    render:(_,record)=>{
      return(
        <span>
          <a>审批</a>
          <a style={{marginLeft:20}}>详情</a>
        </span>
      )
    }
  },
];

const datas = [
  {
    key: '1',
    name: '西二环辅路道路提升项目',
    count: 136.95,
    description: '西二环辅路修缮和整补',
    company:'住建局',
    sponsor:'李洪亮',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-10-21 18:29:51',
  },  
  {
    key: '2',
    name: '西市铁路建设道路项目',
    count: 1688.37,
    description: '西市铁路建设',
    company:'城建局局',
    sponsor:'王福建',
    type:'基础修建',
    status:'success',
    creatTime:'2022-01-22 10:19:56',
  },  
  {
    key: '3',
    name: '南二环建设路西口道路花卉养殖项目',
    count: 152.20,
    description: '建设路西口绿化',
    company:'住建局',
    sponsor:'刘楠非',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-11-01 08:21:09',
  },
  {
    key: '4',
    name: '西安西咸新区沣西新城立交桥改造项目',
    count: 280.55,
    description: '立交桥改造项目',
    company:'住建局',
    sponsor:'李柳菲',
    type:'基础设施建设',
    status:'success',
    creatTime:'2021-12-17 13:21:24',
  },
  {
    key: '5',
    name: '秦汉新城翱翔小镇翱翔三路绿化养护项目',
    count: 92.31,
    description: '绿化养护项目',
    company:'住建局',
    sponsor:'周立齐',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-10-10 12:19:11',
  },
  {
    key: '6',
    name: '西安市秦岭丰裕口道路养护项目',
    count: 68.37,
    description: '道路养护项目',
    company:'住建局',
    sponsor:'李洪亮',
    type:'基础设施维护',
    status:'success',
    creatTime:'2022-05-24 15:09:41',
  },
];

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {  
      loading:false,    
      data:[],
      current:3
    };
  }

  getData = () =>{
    this.setState({
      loading: true,
      data:[]
    });
    setTimeout(() => {
      this.setState({
        loading: false,
        data:datas
      });    
    }, 1000);
  }

  componentDidMount() {
    this.getData();
    window.scrollTo(0, 0);
  }

  onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
    this.getData();
  }

  downLoad  = () =>{
    window.open('https://pics3.baidu.com/feed/5366d0160924ab185fb2574cd1ba56c47a890beb.png?token=47123aec396620c62fa910534c5e6d3f');
  }

  stepOnChange = (value) => {
    this.setState({current:value});
  };

  getCurrent = () => {
    const { data, loading} = this.state;
    if(this.state.current === 0){
      return(
        <div>
          <div style={{width:'100%',marginLeft:40}}>
          <Descriptions title="工程明细">
              <Descriptions.Item label="项目名称" span={3}>政府关于基础设施道路维护养护项目</Descriptions.Item>
              <Descriptions.Item label="项目金额" span={3}>1950万元</Descriptions.Item>
              <Descriptions.Item label="承建方" span={3}>中建二十一局(全包)</Descriptions.Item>
              <Descriptions.Item label="项目进度" span={3}>5%</Descriptions.Item>
              <Descriptions.Item label="投入人数" span={3}>1852人</Descriptions.Item>
              <Descriptions.Item label="甲方投资金额" span={3}>1000万人民币</Descriptions.Item>
              <Descriptions.Item label="项目描述" span={3}>2023年底交付工程,工程维护保障期3年,自交工日起。</Descriptions.Item>
              <Descriptions.Item label="附件" span={3}><a onClick={this.downLoad}><PaperClipOutlined /> 文件审批材料及承建商资料.zip</a></Descriptions.Item>
          </Descriptions>
          </div>
          <Divider />
          <div>
            <Title style={{textAlign:'left',marginLeft:40}} level={5}>立项审批明细</Title>
              <Table style={{marginLeft:30,marginTop:10}} columns={columns} dataSource={data} size="small" onChange={this.onChange}
                loading={loading}
                pagination={{pageSize:5,
                  total:6,
                  showTotal:(total) => `共 ${total} 个`,
                  }
                  } />
          </div>          
        </div>
      )
    }else if(this.state.current === 1){
      return(
        <Descriptions
            title="住建局审批细则"
            bordered
            column={{
              xxl: 4,
              xl: 3,
              lg: 3,
              md: 3,
              sm: 2,
              xs: 1,
            }}>
            <Descriptions.Item label="工序检验单"><a>YQ2587412563</a></Descriptions.Item>
            <Descriptions.Item label="科室">住建局</Descriptions.Item>
            <Descriptions.Item label="审批时间">2022-11-24 15:30:28</Descriptions.Item>
            <Descriptions.Item label="审批金额">RMB 589万</Descriptions.Item>
            <Descriptions.Item label="审批意见"><span style={{color:'#87D068'}}>同意</span></Descriptions.Item>
            <Descriptions.Item label="行政流程">秒审批</Descriptions.Item>
            <Descriptions.Item label="审批人">刘航宇</Descriptions.Item>
            <Descriptions.Item label="审批过程">
              风险控制: 刘伟 2022-10-07 10:25:57
              <br />
              抵押调查: 王星 2022-10-08 14:29:37
              <br />
              总经办: 罗广庆 2022-10-11 18:51:58
              <br />
              纪委监察: 卫齐伟 2022-10-22 17:29:38
              <br />
              总领导(支书记) 吴海清 2022-11-21 10:29:54
            </Descriptions.Item>
        </Descriptions>
      )
    }else if(this.state.current === 3){
      return(
        <Result
          status="success"
          title="项目立项资金审批完成！"
          subTitle="总经理审批完成! 汇款程序已经启动，项目即将启动"
          extra={[
            <Button type="primary" key="console">
              确定
            </Button>,
            <Button key="buy" onClick={()=> { this.props.history.push('/infoDetail')}}>返回</Button>,
          ]}
        />
      )
    }else if (this.state.current === 2){
      return (

        <Form
          name="basic"
          style={{width:500,margin:'0 auto'}}
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 20,
          }}
          initialValues={{
            username: '张海洋',
            password:"行政审批局",
            type:"平行审评",
            offer:185,
            description:'根据国新出审[2022]1551号文件,审批编号:ISBN 978-7-498-09786-6, 根据住房和城乡建设部有关建筑业企业资质管理规定及《行政许可法》，我局对近期申请建筑业企业资质的申报材料进行了审查核准，现将核准结果予以公告。'
          }}
          autoComplete="off"
        >
          <Form.Item
            label="批复人员"
            name="username"
            rules={[
              {
                required: true,
                message: '输入批复人员!',
              },
            ]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            label="行政单位"
            name="password"
            rules={[
              {
                required: true,
                message: '输入范围!',
              },
            ]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            label="流程类型"
            name="type"
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Select
              defaultValue="平行审评"
              disabled
              options={[
                {
                  value: '基础类型',
                  label: '基础类型',
                },
                {
                  value: '平行审评',
                  label: '平行审评',
                },
                {
                  value: '越级申请',
                  disabled: true,
                  label: '越级申请',
                },
                {
                  value: '总部审批',
                  label: '总部审批',
                },
              ]}
            />
          </Form.Item>
          <Form.Item label="报价" 
             name="offer"
             rules={[
              {
                required: true,
                message: '请输入报价!',
              }
            ]}>
            <InputNumber style={{width:150}} disabled />
          </Form.Item>
          <Form.Item label="项目截图" name="pic" >
            <Image
              disabled
              width={200}
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mianfeiwendang.com%2Fpic%2F5f8b4e83675a6801dfc7609b35310ac30cf6f3cd%2F1-1134-jpg_6-1512-0-0-1512.jpg&refer=http%3A%2F%2Fimg.mianfeiwendang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672305034&t=67d7b3634c5828dea0e1ec6320464ad0"
            />
          </Form.Item>
          <Form.Item label="审批描述" name="description">
            <TextArea  disabled rows={5} />
          </Form.Item>     
          <Form.Item label="文件汇总" name="annex">
            <a><PaperClipOutlined />《2022年第20批建筑业企业资质核准结果汇总表》</a>
          </Form.Item>      
        </Form>
      );
    }
  }

  render() {
    const { data, loading, current } = this.state;
    return (
      <>
        <div style={{marginLeft:0}}>
            {/* <Breadcrumbs props={this.props}></Breadcrumbs> */}
            <Breadcrumb style={{margin:24}}>
              <Breadcrumb.Item href="#">
                  信息概览
              </Breadcrumb.Item>
              <Breadcrumb.Item href="#">
                  数据详情
              </Breadcrumb.Item>
              <Breadcrumb.Item href="#">
                  审批详情
              </Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <Divider />   
        <div style={{margin:20}}>          
          <div style={{width:'94%',margin:'0 auto'}}>
            <Steps current={current} onChange={this.stepOnChange}>
              <Step title="立项审批" description='' />
              <Step title="住建局审批" description='审批项目' />
              <Step title="财政局审批" description='审批款项' />
              <Step title="审批完成" description='款项审批完成' />
            </Steps>
          </div>
          <Divider />
          {
            this.getCurrent()
          }
        </div>
      </>
    )
    }
}
